<script setup lang="ts">
const msg = "Hello World";
const count = 10;
const price = 2.5;
const isMarry: boolean = false;
const money = 0; // 存款
const age = 20;
const skills = "写代码";

// 声明函数
const getContent = () => {
  return "老高讲V3";
};
// 定义一个点击的函数
// const clickFn = (a: number) => {
//   alert("点我干嘛" + a);
// };
const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log("值改变了", inputDom.value);
};
const enterClick = (event: Event) => {
  const obj = event as KeyboardEvent
  if (obj.key === "Enter") {
    alert("您点击了回车");
  }
};
</script>

<template>
  <div class="container">
    <!-- 插值表达式 -->
    {{ (msg + "Vue3").split("").reverse().join("") }}
    <p>总价：{{ count * price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态: {{ money || "穷光蛋" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用: {{ getContent() }}</p>
    <p>1 + 2 {{ 1 + 2 }}</p>

    <!-- <button v-on:click="clickFn(1, 2, 3)">测试</button> -->
    <!-- 完整写法v-on:事件名="方法名" -->
    <!-- 语法糖的写法 @click -->
    <!-- <button @click="clickFn(1, 2, 3)">测试</button> -->
    <!-- change/input -->
    <input type="text" @change="changeValue" @keydown="enterClick" />
  </div>
</template>

<style scoped>
.container {
  font-size: 30px;
  font-weight: bolder;
  color: brown;
}
</style>
